<!DOCTYPE html>
<html>
<head>
	<title>学习统计</title>
		  <meta name="keywords" content="学习统计">
	  <meta name="description" content="学习统计">
	  <meta charset="UTF-8">
	  <!--忽略识别手机号-->
	  <meta name="format-detection" content="telephone=no" />
	  <!--忽略识别邮箱-->
	  <meta name="format-detection" content="email=no" />
	  <!--网站开启对 web app 程序的支持-->
	  <meta name="apple-mobile-web-app-capable" content="yes">
	  <!--在 web app 应用下状态条（屏幕顶部条）的颜色；(改变顶部状态条的颜色)-->
	  <!--默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明）；-->
	  <meta name="apple-mobile-web-app-status-bar-style" content="black">
	  <!--http-equiv="Content-Type" 表示描述文档类型-->
	  <!--HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容-->
	  <meta http-equiv="Content-Type" content="text/html">
	  <!-- UC默认竖屏 ，UC强制全屏 -->
	  <meta name="full-screen" content="yes">
	  <!--使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。-->
	  <!--应用模式-->
	  <meta name="browsermode" content="application">
	  <!-- QQ强制竖屏 QQ强制全屏 -->
	  <!--设置屏幕方向-->
	  <meta name="x5-orientation" content="portrait">
	  <!--设置全屏-->
	  <meta name="x5-fullscreen" content="true">
	  <!--设置屏幕模式-->
	  <meta name="x5-page-mode" content="app">
	  <!-- windows phone 点击无高光 -->
	  <meta name="msapplication-tap-highlight" content="no">
	  <!-- /* 防止页面缓存 */ -->
	  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	  <meta http-equiv="Pragma" content="no-cache" />
	  <meta http-equiv="Expires" content="0" />
	  <link rel="shortcut icon" href="images/favicon.ico">
	<script>
	    const WIDTH = 400			
	    const mobileAdapter = () => {
	      let scale = screen.width / WIDTH
	      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
	      let meta = document.querySelector('meta[name=viewport]')
	      if (!meta) {
	        meta = document.createElement('meta')
	        meta.setAttribute('name', 'viewport')
	        document.head.appendChild(meta)
	      }
	      meta.setAttribute('content',content)
	    }
	    mobileAdapter()
	    window.onorientationchange = mobileAdapter //屏幕翻转时再次执行
  </script>
	   <link rel="stylesheet" href="layui/css/layui.css">
	   <script src="layui/layui.js"></script>
	   <style type="text/css">
	   	*{
	   		margin:0;
	   		padding:0;
	   	}
	   	html,body{
	   		position: fixed;
	   		height:100%;
	   		width:100%;
	   	}
	   	.layui-table-view{
	   		margin:0;
	   	}
	   	.layui-table td, .layui-table th{
	   		font-size:12px!important;
	   	}
	   </style>
</head>
<body>
 <table id="demo" width="100%"></table>
<script type="text/javascript">
	layui.use('table', function(){
	  var table = layui.table;
	  var token = getUrlParameters('t');
	  var name = getUrlParameters('r');
	  var phone = getUrlParameters('p');
	  // var token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2FjY291bnQiOjEsImV4cCI6MTYwNDQwOTg0Mn0.Zc72RD_hRipXMj7H9KSnPSMVB-L9R-Lq0TNvTAomi_Q';
	  // var name = '赵海洋';
	  // var phone = '13134342345'
	  //第一个实例
	  table.render({
	    elem: '#demo'
	    // ,url: 'http://api.ssuhen.com/api/statistics/lessonCategoryReport' //数据接口
	    ,url: 'http://api.ssuhen.com/api/statistics/lessonUserReport' //数据接口
	    // ,url: 'http://154.8.161.25:8080/api/statistics/lessonUserReport' //数据接口
	    ,headers:{'Authorization':token}
	    ,method:'post'
	    ,height:'full-1'
	    ,where:{
	    	realname:name,
	    	mobile:phone,
	    }
	    ,contentType:'application/json'
	    ,parseData:function(res){
	    	console.log(res.data.records)
	    	return {
	    		"code": res.code, //解析接口状态
			      "msg": res.msg, //解析提示文本
			      "count": res.data.total, //解析数据长度
			      "data": res.data.records //解析数据列表
	    	}
	    },
	    response: {
		    statusCode: 200 //规定成功的状态码，默认：0
		},
		limit:99
	    ,request: {
		    pageName: 'pageNo' //页码的参数名称，默认：page
		    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
		  }
	    ,page: false //开启分页
	    ,cols: [[ //表头
	      {field: 'lessonName', title: '课程名称', }
	      ,{field: 'classHours', title: '总课时' ,width:80}
	      ,{field: 'finishHours', title: '已学课时',width:80  }
	      ,{field: 'completionRate', title: '完课率',width:80  }
	    ]]
	  });
	  function getUrlParameters(key) {
	    const reg = new RegExp(`(^|&)${key}=([^&]*)(&|$)`, 'i');
	    const urlObj = window.location;
	    // eslint-disable-next-line max-len
	    // const r = urlObj.href.indexOf('#') > -1 ? urlObj.hash.split('?')[1].match(reg) : urlObj.search.substr(1).match(reg);
	    const r = urlObj.search.substr(1).match(reg);
	    if (r != null) {
	      return unescape(r[2]);
	    }
	    return '';
	  }
  
});
</script>
</body>
</html>